<!--  -->
<template>
  <div class="container_margin">
    <div class="title">
      <van-icon name="arrow-left" @click="exit" size="25"></van-icon>
      <van-button
        type="primary"
        size="small"
        v-show="lock"
        @click="next"
        color="#7232dd"
        >下一题</van-button
      >
    </div>

    <questioncard class="card" title="选择题">
      <span slot="info" style="font-size: 16px">{{ test.title }}</span>
      <div
        class="cell"
        :class="chooseClass(index)"
        slot="text"
        @click="answer(index)"
        v-for="(item, index) in test.solutions"
        :key="index"
      >
        <span>{{ item }}</span>
      </div>
    </questioncard>
    <questioncard class="card" title="答案解析" v-show="showAnswer">
      <span slot="info" style="font-size: 16px; font-weight: 700"
        >正确答案: {{ test.right_answer | answerFormat }}</span
      >
      <span slot="answer">{{ test.description }} </span>
    </questioncard>
  </div>
</template>

<script>
import { Toast } from "vant";
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等)
import mycell from "../components/cell.vue";
import Questioncard from "../components/questioncard.vue";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: { Questioncard, mycell },
  data() {
    return {
      index: 0,
      length: 0,
      lock: false,
      showAnswer: false,
      choose: -1,
      test: {
        id: "1",
        title: "午时是指几点到几点?",
        right_answer: 2,
        description: "午时是指11点到13点",
        solutions: ["A.7点到9点", "B.9点到11点", "C.11点到13点"],
      },
      items: [],
    };
  },

  computed: {},

  watch: {},

  methods: {
    chooseClass: function (index) {
      return {
        right: index === this.choose && index === this.test.rightAnswer,
        wrong: index === this.choose && index != this.test.rightAnswer,
      };
    },
    answer(index) {
      if (this.lock === false) {
        this.choose = index;
        if (this.choose != this.test.rightAnswer) {
          this.showAnswer = true;
        }
        this.lock = true;
      }
    },
    exit() {
      //TODO:
      this.$router.back();
    },
    async getItem() {
      return await this.$http.get(`/match/10`);
    },
    init() {
      this.getItem().then((res) => {
        let data = res.data.result;
        this.length = data.length;
        this.index = 0;
        this.items = data;
        this.test = this.items[0];
        this.lock = false;
        this.showAnswer = false;
        this.choose = -1;
      });
    },
    next() {
      if (this.index < this.length - 1) {
        this.index++;
        this.test = this.items[this.index];
        this.choose = -1;
        this.lock = false;
        this.showAnswer = false;
      } else {
        Toast("题目不足");
        this.init();
      }
    },
  },
  mounted() {
    this.init();
  },
  filters: {
    answerFormat(index) {
      return String.fromCharCode("A".charCodeAt(0) + index);
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */

.title {
  display: flex;
  justify-content: space-between;
}
.card {
  margin-top: 10px;
}
.cell {
  height: 56px;
  line-height: 56px;
  background-color: #f3f3f3;
  padding-left: 20px;
  margin-top: 12px;
  font-size: 18px;
}
.right {
  background-color: #18e94c;
}
.wrong {
  background-color: rgb(238, 96, 96);
}
</style>